<template>
	<!-- 油工测卡计算软件 -->
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm">
			<u-form-item label-width="350"
				:label-position="labelPosition" label="K值" prop="kValue">
				<u-input :border="border" placeholder="请输入K值" v-model="model.kValue" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="Pa(KN)" prop="pa">
				<u-input :border="border" placeholder="请输入Pa" v-model="model.pa" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="标记A(cm)" prop="markA">
				<u-input :border="border" placeholder="请输入标记A" v-model="model.markA" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="Pb(KN)" prop="pb">
				<u-input :border="border" placeholder="请输入Pb" v-model="model.pb" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="标记B(cm)" prop="markB">
				<u-input :border="border" placeholder="请输入标记B" v-model="model.markB" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="Pc(KN)" prop="pc">
				<u-input :border="border" placeholder="请输入Pc" v-model="model.pc" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="标记C(cm)" prop="markC">
				<u-input :border="border" placeholder="请输入标记C" v-model="model.markC" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="Pd(KN)" prop="pd">
				<u-input :border="border" placeholder="请输入Pd" v-model="model.pd" type="digit"></u-input>
			</u-form-item>
			<u-form-item label-width="350"
				:label-position="labelPosition" label="标记D(cm)" prop="markD">
				<u-input :border="border" placeholder="请输入标记D" v-model="model.markD" type="digit"></u-input>
			</u-form-item>
		</u-form>

		<u-button type="primary" @click="submit">计算</u-button>

		<view class="u-config-wrap">
			<view class="u-config-item">
				<view class="u-item-title">计算结果</view>
				<u-form-item style="font-size: 22px;" :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="300"
					:label-position="labelPosition" label="卡点深度" prop="stuckPointDepth">
					<span v-if="model.stuckPointDepth"> {{model.stuckPointDepth}} cm </span>
				</u-form-item>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">计算公式</view>
				<view class="u-item-desc">H = K × L ÷ P</view>
				<view class="u-item-desc">式中：</view>
				<view class="u-item-desc">H — 卡点深度，cm</view>
				<view class="u-item-desc">K — K值</view>
				<view class="u-item-desc">L — 平均长度，cm</view>
				<view class="u-item-desc">P — 平均拉力，KN</view>
				<view class="u-item-desc">L = (L1 + L2 + L3) ÷ 3</view>
				<view class="u-item-desc">P = (P1 + P2 + P3) ÷ 3</view>
				<view class="u-item-desc">L1 = B - A</view>
				<view class="u-item-desc">P1 = Pb - Pa</view>
				<view class="u-item-desc">L2 = C - A</view>
				<view class="u-item-desc">P2 = Pc - Pa</view>
				<view class="u-item-desc">L3 = D - A</view>
				<view class="u-item-desc">P3 = Pd - Pa</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					kValue: '',
					pa: '',
					markA: '',
					pb: '',
					markB: '',
					pc: '',
					markC: '',
					pd: '',
					markD: '',
					stuckPointDepth: ''
				},
				rules: {
					kValue: [{
						required: true,
						message: '请输入K值',
						trigger: 'blur'
					}],
					pa: [{
						required: true,
						message: '请输入Pa',
						trigger: 'blur'
					}],
					markA: [{
						required: true,
						message: '请输入标记A',
						trigger: 'blur'
					}],
					pb: [{
						required: true,
						message: '请输入Pb',
						trigger: 'blur'
					}],
					markB: [{
						required: true,
						message: '请输入标记B',
						trigger: 'blur'
					}],
					pc: [{
						required: true,
						message: '请输入Pc',
						trigger: 'blur'
					}],
					markC: [{
						required: true,
						message: '请输入标记C',
						trigger: 'blur'
					}],
					pd: [{
						required: true,
						message: '请输入Pd',
						trigger: 'blur'
					}],
					markD: [{
						required: true,
						message: '请输入标记D',
						trigger: 'blur'
					}]
				},
				labelPosition: 'left',
				border: true,
				
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const K = parseFloat(this.model.kValue);
						const Pa = parseFloat(this.model.pa);
						const Pb = parseFloat(this.model.pb);
						const Pc = parseFloat(this.model.pc);
						const Pd = parseFloat(this.model.pd);
						const A = parseFloat(this.model.markA);
						const B = parseFloat(this.model.markB);
						const C = parseFloat(this.model.markC);
						const D = parseFloat(this.model.markD);

						// 计算L1, L2, L3
						const L1 = B - A;
						const L2 = C - A;
						const L3 = D - A;

						// 计算P1, P2, P3
						const P1 = Pb - Pa;
						const P2 = Pc - Pa;
						const P3 = Pd - Pa;

						// 计算平均长度L和平均拉力P
						const L = (L1 + L2 + L3) / 3;
						const P = (P1 + P2 + P3) / 3;

						// 计算卡点深度H
						this.model.stuckPointDepth = (K * L / P).toFixed(2);
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}

	.u-config-wrap {
		margin-top: 30rpx;
	}

	.u-config-title {
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.u-config-item {
		padding: 20rpx;
	}

	.u-item-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.u-item-desc {
		font-size: 24rpx;
		color: #666;
	}
</style>